<template>
  <div>
    <el-menu :default-active="$route.path"
             collapse-transition
             router
             background-color="#42454C"
             class="el-menu-vertical-demo"
             active-text-color="#487EEA"
             text-color="#FFFFFF"
             @open="handleOpen"
             @close="handleClose">
           
      <el-menu-item v-for="(item,id) in navData" :key="id" :index="item.navIndex">
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navData: [
        { id: '1', navIndex: '/overview',name:'总览',icon:'el-icon-s-platform' },
        { id: '2', navIndex: '/channel',name:'渠道',icon:'el-icon-office-building' },
        { id: '3', navIndex: '/market',name:'销地',icon:'el-icon-s-data' },
        { id: '4', navIndex: '/machining',name:'加工',icon:'el-icon-s-open' },
        { id: '5', navIndex: '/origin',name:'来源地',icon:'el-icon-map-location' },
        { id: '6', navIndex: '/variety',name:'品种',icon:'el-icon-film' },
      ]
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created () {

  },
}
</script>

<style scoped>
</style>
